export default function TypographyTable() {
   return (
      <div className="my-6 w-full overflow-y-auto">
         <table className="w-full">
            <thead>
               <tr className="even:bg-muted m-0 border-t p-0">
                  <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
                     King's Treasury
                  </th>
                  <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
                     People's happiness
                  </th>
               </tr>
            </thead>
            <tbody>
               <tr className="even:bg-muted m-0 border-t p-0">
                  <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
                     Empty
                  </td>
                  <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
                     Overflowing
                  </td>
               </tr>
               <tr className="even:bg-muted m-0 border-t p-0">
                  <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
                     Modest
                  </td>
                  <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
                     Satisfied
                  </td>
               </tr>
               <tr className="even:bg-muted m-0 border-t p-0">
                  <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
                     Full
                  </td>
                  <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
                     Ecstatic
                  </td>
               </tr>
            </tbody>
         </table>
      </div>
   )
}
